<script setup>
import {getType} from "@/api/system/dict/type.js";
import { ref, reactive} from 'vue';
import useUserStore from '@/store/modules/user'
import {listInfo} from "@/api/system/info.js";
import { listF_details, getF_details, delF_details, addF_details, updateF_details } from "@/api/system/f_details"
import { listF_service, getF_service, delF_service, addF_service, updateF_service } from "@/api/system/f_service"
const userStore = useUserStore();
const { proxy } = getCurrentInstance()
const route = useRoute()

onMounted(() => {
  getTypes(route.params.dictId)
})
let id = 0;

// 获取数据
function getTypes(dictId) {
  id = dictId
  listInfo({...queryParams, hotelId: dictId, managerId: userStore.id}).then(res => {
    hotelDetails.value = res.rows[0]
    // 处理数据
    sysUser.value = hotelDetails.value.sysUser
    console.log(hotelDetails.value)
    console.log(hotelDetails.value.sysUser)
    getList()
    getService()
  })
}

const data = reactive({
  queryParams: {
    // pageNum: 1,
    // pageSize: 10,
    hotelName: null,
    address: null,
    hotelDesc: null,
    managerId: userStore.id,
    totalRooms: null,
    availableRooms: null,
    customerServicePhone: null,
    status: null,
    businessLicense: null,
    hotelTypeId: null,
    scenicAreaId: null,
  },
})
const data2 = reactive({
  queryParams2: {
    // pageNum: 1,
    // pageSize: 10,
    detailId: null,
    xiaofeirenshu: null,
    pingjiashu: null,
    pingjiaxingji: null,
    hotelMiaoshu: null,
    miaoshutupian: null,
    hotelSheshi: null,
    sheshitupian: null,
    foodDetails: null,
    foodImgurl: null,
    hotelZhengce: null,
    weishengfuwu: null,
    hotelShouyi: null,
    tuikuangrenshu: null,
    hotelId: id,
    managerId: userStore.id,
    yingyezhizhao: null,
  }
})
const data3 = reactive({
  queryParams3: {
    serviceId: null,
    serviceName: null
  }
})

const { queryParams3 } = toRefs(data3)
const { queryParams2 } = toRefs(data2)
const { queryParams } = toRefs(data)
let hotelDetails = ref({})
let sysUser = ref({})
let details = ref({})
let serviceList = ref([])

function getService() {
  listF_service({...queryParams3.value, hotelId: id, pageNum: 1, pageSize: 100,}).then(response => {
    serviceList.value = response.rows
    console.log(serviceList.value)
  })
}
/** 查询实体详情列表 */
function getList() {
  listF_details({...queryParams2.value, pageNum: 1, pageSize: 10, managerId: userStore.id, hotelId: id}).then(response => {
    if(response.rows.length === 0){
      // 创建列表
      addF_details({...queryParams2.value, hotelId: id, managerId: userStore.id}).then(response => {
        // 刷新页面
        if(response.code === 200){
          proxy.$modal.msgSuccess("创建成功")
          getList()
        }
      })
    }
    details.value = response.rows[0]
    console.log(details.value)
  })
}


// 新服务输入框的值
const newService = ref('');

// 上传前检查
const beforeUpload = (file, field) => {
  if (hotelInfo.value[field]) {
    alert(`只能上传一张${field === 'businessLicense' ? '营业执照' : '酒店概述'}图片，请先删除已上传的图片。`);
    return false;
  }
  return true;
};

// 处理营业执照图片上传
const handleLicenseUpload = (file) => {
  // 这里可以添加实际的上传逻辑
  const reader = new FileReader();
  reader.onload = (e) => {
    hotelInfo.value.businessLicense = e.target.result;
  };
  reader.readAsDataURL(file.raw);
};

// 添加服务
const addService = () => {
  if (newService.value) {
    // hotelInfo.value.services.push(newService.value);
    // 判断是否含有该服务
    let flag = false
    serviceList.value.forEach(item => {
      if(item.serviceName === newService.value){
        flag = true
      }
    })
    if(!flag){
      // 添加服务
      addF_service({...queryParams3.value, serviceName: newService.value, hotelId: id}).then(response => {
        console.log(response)
        if(response.code === 200){
          proxy.$modal.msgSuccess("添加成功")
          getService()
        }else{
          proxy.$modal.msgError("添加失败")
        }
      })
    }else{
      proxy.$modal.msgError("该服务已存在")
    }
    //addF_service
    newService.value = '';
  }
};

// 删除服务
const removeService = (index) => {
  // hotelInfo.value.services.splice(index, 1);
  console.log(serviceList.value[index])
  if(serviceList.value[index].serviceId){
    delF_service(serviceList.value[index].serviceId).then(response => {
      console.log(response)
      if(response.code === 200){
        proxy.$modal.msgSuccess("删除成功")
        getService()
      }else{
        proxy.$modal.msgError("删除失败")
      }
    })
  }
};

// 保存信息
const saveInfo = () => {
  // 这里可以添加实际的保存逻辑
  console.log('保存的酒店信息：', details.value);
  updateF_details({
    ...details.value, hotelId: id, managerId: userStore.id
  }).then(response => {
    console.log(response)
    if(response.code === 200){
      proxy.$modal.msgSuccess("修改成功")
      getList()
    }else{
      proxy.$modal.msgError("修改失败")
    }
  })

};


function handleClose() {
  const obj = { path: "/hotelmanage/hotel_info" }
  proxy.$tab.closeOpenPage(obj)
}

</script>

<template>
  <el-col :span="1.5">
    <el-button
        type="warning"
        plain
        icon="Close"
        @click="handleClose"
    >返回</el-button>
  </el-col>
  <div class="app-container">
    <h2>酒店信息主体详情</h2>
    <el-form ref="infoForm" :model="hotelInfo" label-width="150px">
      <!-- 酒店名 -->
      <el-form-item label="酒店名">
        <el-input v-model="hotelDetails.hotelName" disabled />
      </el-form-item>
      <!-- 酒店地址 -->
      <el-form-item label="酒店地址">
        <el-input v-model="hotelDetails.address" disabled />
      </el-form-item>
      <!-- 管理员姓名 -->
      <el-form-item label="管理员姓名">
        <el-input v-model="sysUser.nickName" disabled />
      </el-form-item>
      <!-- 管理员联系方式 -->
      <el-form-item label="管理员联系方式">
        <el-input v-model="sysUser.phonenumber" disabled />
      </el-form-item>
      <!-- 消费人数 -->
      <el-form-item label="消费人数">
        <el-input v-model="details.xiaofeirenshu" disabled />
      </el-form-item>
      <!-- 评价数 -->
      <el-form-item label="评价人数">
        <el-input v-model="details.pingjiashu" disabled />
      </el-form-item>
      <!-- 评价星级 -->
      <el-form-item label="评价星级">
        <el-input v-model="details.pingjiaxingji" disabled />
      </el-form-item>
      <!-- 营业执照图片 -->
      <el-form-item label="酒店营业执照" prop="yingyezhizhao">
        <image-upload v-model="details.yingyezhizhao"/>
      </el-form-item>
      <!-- 酒店概述 -->
      <el-form-item label="酒店概述">
        <el-input v-model="details.hotelMiaoshu" type="textarea" placeholder="请输入酒店概述" />
      </el-form-item>
      <!-- 酒店概述图片 -->
      <el-form-item label="酒店描述图片" prop="miaoshutupian">
        <image-upload v-model="details.miaoshutupian"/>
      </el-form-item>
      <!-- 酒店设施 -->
      <el-form-item label="酒店设施">
        <el-input v-model="details.hotelSheshi" type="textarea" placeholder="请输入酒店设施" />
      </el-form-item>
      <el-form-item label="设施图片" prop="sheshitupian">
        <image-upload v-model="details.sheshitupian"/>
      </el-form-item>
      <!-- 参餐饮情况 -->
      <el-form-item label="餐饮情况">
        <el-input v-model="details.foodDetails" type="textarea" placeholder="请输入酒店设施" />
      </el-form-item>
      <el-form-item label="餐饮图片" prop="foodImgurl">
        <image-upload v-model="details.foodImgurl"/>
      </el-form-item>
      <!-- 酒店政策 -->
      <el-form-item label="酒店政策">
        <el-input v-model="details.hotelZhengce" type="textarea" placeholder="请输入酒店政策" />
      </el-form-item>
      <!-- 卫生与服务 -->
      <el-form-item label="卫生与服务">
        <el-input v-model="details.weishengfuwu" type="textarea" placeholder="请输入卫生与服务情况" />
      </el-form-item>
      <!-- 所提供的服务 -->
      <el-form-item label="所提供的服务">
        <view style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 8px; max-height: 200px; align-content: flex-start;">
          <el-tag
              v-for="(service, index) in serviceList"
              :key="index"
              closable
              @close="removeService(index)"
          >
            {{ service.serviceName }}
          </el-tag>
        </view>
        <el-input
            v-model="newService"
            placeholder="请输入服务名称"
            @keyup.enter="addService"
            style="width: 200px; margin-left: 10px"
        />
      </el-form-item>
      <!-- 保存按钮 -->
      <el-form-item>
        <el-button type="primary" @click="saveInfo">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>